<template>
  <div class="student-main">
    <search-bar @search="handleSearch" :classList="classList" :dormList="dormList"></search-bar>
    <el-card shadow="never" class="content">
      <el-button type="primary" @click="goAdd()">添加</el-button>
      <div class="section-table">
        <el-table v-loading="loading" :data="students" border stripe style="width: 100%">
          <el-table-column show-overflow-tooltip fixed type="index" width="50"></el-table-column>
          <el-table-column show-overflow-tooltip fixed prop="name" label="姓名" width="150"></el-table-column>
          <el-table-column show-overflow-tooltip prop="sexv" label="性别" width="120"></el-table-column>
          <el-table-column show-overflow-tooltip prop="classname" label="班级" width="120"></el-table-column>
          <el-table-column show-overflow-tooltip prop="city" label="城市" width="120"></el-table-column>
          <el-table-column show-overflow-tooltip prop="tel" label="电话" width="120"></el-table-column>
          <el-table-column show-overflow-tooltip prop="dormname" label="宿舍" width="120"></el-table-column>
          <el-table-column show-overflow-tooltip prop="school" label="毕业院校" width="120"></el-table-column>
          <el-table-column show-overflow-tooltip label="wx/qq" width="120">
            <template slot-scope="scope">{{scope.row.wx||'-'}} / {{scope.row.qq||'-'}}</template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="status" label="工作" width="120">
            <template slot-scope="scope">{{scope.row.status}}==>{{scope.row.job}}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="90">
            <template slot-scope="scope">
              <el-button
                @click="goDel(scope.row.id)"
                style="color: #F56C6C;"
                type="text"
                size="small"
              >删除</el-button>
              <el-button @click="goEdit(scope.row.id)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="pagination">
          <el-col :span="10" :offset="14">
            <my-pagination :page="page" @page-change="handlePageChange"></my-pagination>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 弹窗 -->
    <student-detail
      ref="studentDetail"
      :regionDataPlus="regionDataPlus"
      :classList="classList"
      :dormList="dormList"
    ></student-detail>
  </div>
</template>
<script>
import SearchBar from "./components/SearchBar";
import studentApi from "@/api/xy/student";
import MyPagination from "@/components/common/Pagination";
import pageMixin from "@/mixins/pageMixin";
import StudentDetail from "./components/Detail";
import dormApi from "@/api/xy/dorm";
import classApi from "@/api/xy/clazz";
import { CodeToText, regionDataPlus } from "element-china-area-data";
import _ from "lodash";
export default {
  name: "Student",
  components: {
    SearchBar,
    MyPagination,
    StudentDetail
  },
  mixins: [pageMixin],
  data() {
    return {
      loading: false,
      dialog: false,
      studentList: [],
      classList: [], //班级信息,
      dormList: [], //宿舍信息
      regionDataPlus
    };
  },
  created() {
    //初始化基本信息
    this.initBaseInfo();
    this.getStudentList();
  },
  methods: {
    //处理自组建search
    handleSearch(form) {
      this.getStudentList(form);
    },
    getStudentList(searchForm = {}) {
      this.loading = true;
      console.log(searchForm);
      studentApi
        .getStudentList({
          start: this.page.start,
          limit: this.page.limit,
          ..._.pickBy(searchForm, v => v)
        })
        .then(res => {
          this.studentList = res.data.list;
          this.page.total = res.data.totalRow;
          this.page.pageCount = res.data.totalPage;
          this.loading = false;
        });
    },
    goAdd() {
      // this.dialog = true;
      this.$refs.studentDetail.openDialog();
    },
    goEdit(id) {
      this.$refs.studentDetail.openDialog(id);
    },
    handlePageChange() {
      this.getStudentList();
    },
    /**
     * 初始化基本信息
     */
    initBaseInfo() {
      dormApi.getDormList().then(res => {
        this.dormList = res.data.list;
      });
      classApi.classList().then(res => {
        this.classList = res.data.list;
      });
    },
    goDel(id) {
      studentApi
        .delStudent({
          id
        })
        .then(res => {
          if (res.code == "true") {
            this.$message.success("删除成功！");
            this.getStudentList();
          } else {
            this.$message.error("删除失败！");
          }
        });
    }
  },
  computed: {
    students() {
      var rs = this.studentList.map(item => {
        var cityCode = item.city;
        var cityTextArr = [];
        if (cityCode) {
          var cityCodeArr = cityCode.split(",");
          cityCodeArr.forEach(element => {
            cityTextArr.push(CodeToText[element]);
          });
        }
        item.city = cityTextArr;
        return item;
      });
      return rs;
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  margin: 20px auto;
}
.pagination {
  margin: 30px;
}
</style>


